<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>16. Toolbar add button</title>
    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src="../lib/markdown-it/dist/markdown-it.js"></script>
    <script src="../lib/to-mark/dist/to-mark.js"></script>
    <script src="../lib/tui-code-snippet/dist/tui-code-snippet.js"></script>
    <script src="../lib/tui-color-picker/dist/tui-color-picker.js"></script>
    <script src="../lib/codemirror/lib/codemirror.js"></script>
    <script src="../lib/highlightjs/highlight.pack.js"></script>
    <script src="../lib/squire-rte/build/squire-raw.js"></script>
    <link rel="stylesheet" href="../lib/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="../lib/highlightjs/styles/github.css">
    <link rel="stylesheet" href="./explain.css">
  </head>
  <body>
    <div class="code-html">
    <script src="../lib/plantuml-encoder/dist/plantuml-encoder.js"></script>
    <script src="../lib/raphael/raphael.js"></script>
    <script src="../lib/tui-chart/dist/tui-chart.js"></script>
    <script src="../dist/tui-editor-Editor-all.js"></script>
    <link rel="stylesheet" href="../dist/tui-editor.css">
    <link rel="stylesheet" href="../dist/tui-editor-contents.css">
    <link rel="stylesheet" href="../lib/tui-color-picker/dist/tui-color-picker.css">
    <link rel="stylesheet" href="../lib/tui-chart/dist/tui-chart.css">

    <!-- IMPORT Font Awesome 5 here-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <style>
      /* class for our button */
      .our-button-class{
        float: left;
        box-sizing: border-box;
        outline: none;
        cursor: pointer;
        background-color: #fff;
        width: 22px;
        height: 22px;
        border-radius: 0;
        margin: 5px 3px;
        border: 1px solid #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>

    <div id="editSection"></div>

    <script class="code-js">
      var content = 'FIRST and LAST button are custom';

      var editor = new tui.Editor({
        el: document.querySelector('#editSection'),
        previewStyle: 'vertical',
        height: '400px',
        initialEditType: 'markdown',
        initialValue: content,
        toolbarItems: [
        'heading',
          'bold',
          'italic',
          'strike',
          'divider',
          'hr',
          'quote',
          'divider',
          'ul',
          'ol',
          'task',
          'indent',
          'outdent',
          'divider',
          'table',
          'image',
          'link',
          'divider',
          'code',
          'codeblock',
          'divider',
          // ADD button method 1
          {
            type: 'button',
            options: {
              $el: $('<div class="our-button-class"><i class="fas fa-briefcase-medical"></i></div>'),
              name: 'test2',
              className: '',
              command: 'Bold', // you can use "Bold"
              tooltip: 'Bold'
            }
          }
        ]
      });

      // ADD button method 2
      var toolbar = editor.getUI().getToolbar();

      editor.eventManager.addEventType('Event1');
      editor.eventManager.listen('Event1', function() {
        alert('button click!');
        // do some other thing...
      });

      toolbar.addButton({
        name: 'customize',
        className: 'fab fa-accessible-icon',
        event: 'Event1',
        tooltip: 'Apple!!!',
        $el: $('<div class="our-button-class"><i class="fab fa-apple"></i></div>')
      }, 1);
    </script>
  </body>
</html>
